<template>
	<view>
	 <cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
		</cu-custom> 
		<view class="cu-bar bg-white search fixed" :style="'margin-top:'+CustomBar+'px'">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" v-model="listQuery.search_value" placeholder="请输入考试名称" confirm-type="search" />
			</view>
			<view class="action"><button @click="doSearch" class="cu-btn bg-green shadow-blur round">搜索</button></view>
		</view>
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
			<view :style="[{ 'margin-top': 70 + 'px' }]">
				<view class="cu-list menu" v-for="(item, index) in examdata" :key="item.id">
					<view class="cu-item ">
						<view class="content padding-tb-sm">
							<view>
								<text class="text-blue margin-right-xs">试卷名称:</text>
								{{ item.name }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-edit  text-blue margin-right-xs">试卷标题:</text>
								{{ item.title }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-timefill text-blue margin-right-xs">开始时间:</text>
								{{ item.stime }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-time text-blue margin-right-xs">结束时间:</text>
								{{ item.etime }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-sort text-blue margin-right-xs">所属科目:</text>
								{{ item.subname }}/{{ item.proname }}
							</view>
						</view>
						<view class="action">
							<button class="cu-btn round bg-green shadow" @click="doExam(item)">
								<text class="cuIcon-notice"></text>
								查看成绩
							</button>
						</view>
					</view>
				</view>
				<ShowNull :isConnected="isConnected"></ShowNull>
			</view>
		</mescroll-uni>
		
		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">您的成绩</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="padding-xl">
					<view class="cu-card case">
						<view class="cu-bar bg-white margin-top">
							<view class="action">
								<text class="cuIcon-title text-orange "></text>
								考试名称
							</view>
							<view class="action">
								<view class="cu-tag round bg-olive light">{{ curentitem.name }}</view>
							</view>
						</view>
		
						<view class="cu-bar bg-white margin-top">
							<view class="action">
								<text class="cuIcon-title text-orange "></text>
								试卷标题
							</view>
							<view class="action">
								<view class="cu-tag round bg-olive light">{{ curentitem.title }}</view>
							</view>
						</view>
		
						<view class="cu-bar bg-white margin-top">
							<view class="action">
								<text class="cuIcon-title text-orange "></text>
								最高分
							</view>
							<view class="action">
								<view class="cu-tag round bg-olive light">{{ curentitem.maxFraction }}分</view>
							</view>
						</view>
		
						<view class="cu-bar bg-white margin-top">
							<view class="action">
								<text class="cuIcon-title text-orange "></text>
								参考次数
							</view>
							<view class="action">
								<view class="cu-tag round bg-olive light">{{ curentitem.doExamSize }}次</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 引入mescroll-uni组件
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import ShowNull from '@/components/shownull.vue';
import { mapState } from 'vuex';
export default {
	computed: mapState(['user', 'hasLogin']),
	components: {
		MescrollUni,
		uniList,
		uniListItem,
		ShowNull
	},
	data() {
		return {
			isConnected: true,
			modalName: null,
			modalContent: '',
			CustomBar: this.CustomBar,
			examdata: [],
			scrollTop: 0,
			InputBottom: 0,
			old: {
				scrollTop: 0
			},
			todata: {},
			curentitem: {
				doExamSize: '',
				exam: '',
				maxFraction: '',
				subpro: {}
			},
			mescroll: null, //mescroll实例对象
			// 下拉刷新的配置
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
			},
			// 上拉加载的配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				isLock: false, // 是否锁定上拉加载 (可用于不触发upCallback,只保留回到顶部按钮的场景)
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			// 列表数据
			dataList: [],
			listQuery: {
				page_size: 10,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: 'exam.name',
				total: 0,
				workno: 0
			},
			resdata: {}
		};
	},
	// 必须注册滚动到底部的事件,使上拉加载生效
	onReachBottom() {
		this.mescroll && this.mescroll.onReachBottom();
	},
	// 必须注册列表滚动事件,使下拉刷新生效
	onPageScroll(e) {
		this.mescroll && this.mescroll.onPageScroll(e);
	},
	methods: {
		hideModal() {
			this.modalName = null;
			this.todata = {};
		},
		initData: function() {
			if (this.hasLogin) {
				this.listQuery.workno = this.user.workno;
				var data = this.listQuery;
				data = encodeURI(JSON.stringify(data));
				///examonline/hasExam
				uni.request({
					url: '/examonline/mobile/pageCXCJ',
					data: {
						data
					},
					dataType: 'GET',
					success: res => {
						let resdata = JSON.parse(res.data);
						this.examdata = resdata.data.list;
						this.resdata = resdata.data;
						if (this.examdata.length == 0) {
							this.isConnected = false;
						}
						this.mescroll.endSuccess()
					},
                        fail: () => {
                            // 失败隐藏下拉加载状态
                            this.mescroll.endErr()
                        }
				});
			}
		},
		doExam: function(item) {
			if (this.hasLogin) {
				var data = {
					examid: item.id,
					workno: this.user.workno
				};
				data = encodeURI(JSON.stringify(data));
				uni.request({
					url: '/examonline/mobile/getKSCJ',
					data: {
						data
					},
					dataType: 'GET',
					success: res => {
						let resdata = JSON.parse(res.data);
						item.doExamSize=resdata.data.doExamSize;
						item.maxFraction=resdata.data.maxFraction;
						this.modalName = 'DialogModal2';
						this.curentitem = item;
					}
				});
			} else {
				uni.showToast({
					title: '无法获取登陆信息，请重新登陆！',
					duration: 2000
				});
			}
		},
		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调, 有三种处理方式: */
		downCallback(mescroll) {
			this.initData();
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
				if (this.hasLogin) {
					this.listQuery.page_number=Number(this.listQuery.page_number)+1;
					this.listQuery.workno = this.user.workno;
					var data = this.listQuery;
					data = encodeURI(JSON.stringify(data));
					///examonline/hasExam
					uni.request({
						url: '/examonline/mobile/pageCXCJ',
						data: {
							data
						},
						dataType: 'GET',
						success: res => {
							let resdata = JSON.parse(res.data);
							let data= resdata.data;
							  // 接口返回的当前页数据列表 (数组)
                            let curPageData = data.list; 
                            // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
                            let totalPage = data.totalPage; 
                            // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
                            let totalSize = data.list.length; 
                            // 接口返回的是否有下一页 (true/false)
                            let hasNext = data.lastPage==true?false:true; 
							this.listQuery.page_number=data.pageNumber;
							this.listQuery.page_size=data.pageSize;
							this.resdata = resdata.data;
							if (this.examdata.length == 0) {
								this.isConnected = false;
							}
							 //设置列表数据
                            if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
                            this.examdata = this.examdata.concat(curPageData); //追加新数据
							 mescroll.endByPage(curPageData.length, totalPage); 
						},
			                fail: () => {
			                    // 失败隐藏下拉加载状态
			                    this.mescroll.endErr()
			                }
					});
				}
		},
		doSearch: function() {
			this.initData();
		}
	},
	onReady() {
		if (this.hasLogin) {
			this.initData();
		} else {
			uni.navigateTo({
				url: '../login/login'
			});
		}
	}
};
</script>

<style></style>
